<template>
  <div ref="page">
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="水印示例">
        可以设置颜色、旋转角度、字体大小、字体样式、字体粗细、水印位置、水印间距、水印内容等。设置水印无法手动删除。
      </n-card>
    </div>
    <n-card :bordered="false" class="mt-4 proCard">
      <n-grid cols="1" y-gap="20" responsive="screen">
        <n-grid-item>
          <div class="flex">
            <div class="flex items-center">
              请输入要创建水印的值：
              <n-input class="w-60" v-model:value="valueText" type="text" placeholder="请输入" />
            </div>
            <div class="flex items-center ml-5">
              请输入要创建水印的颜色：
              <n-color-picker class="w-60" v-model:value="valueColor" :show-alpha="false" />
            </div>
          </div>
        </n-grid-item>
        <n-grid-item>
          <n-button type="primary" class="mr-2" @click="setWatermark(valueText)">
            创建整页面水印
          </n-button>
          <n-button
            type="warning"
            class="mr-2"
            @click="setWatermark(valueText, { fontColor: valueColor })"
          >
            更新整页面水印
          </n-button>
          <n-button type="primary" class="mr-2" @click="setWatermark2(valueText)">
            创建局部水印
          </n-button>
          <n-button type="warning" class="mr-2" @click="setWatermark2(valueText)">
            更新整页面水印
          </n-button>
          <n-button type="error" class="mr-2" @click="clear"> 清空整页面水印 </n-button>
          <n-button type="error" class="mr-2" @click="clearAll"> 清空所有水印 </n-button>
        </n-grid-item>
      </n-grid>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
  import { onUnmounted, ref } from 'vue';
  import { useWatermark } from '@/hooks/web/useWatermark';
  const app = ref(document.body);
  const page = ref();
  const valueText = ref('OpenAdmin');
  const valueColor = ref('#d53326');
  const { setWatermark, clear, clearAll } = useWatermark(app, {
    fontColor: '#d53326',
  });
  const { setWatermark: setWatermark2 } = useWatermark(page, {
    fontColor: 'red',
    fontSize: 12,
    rotate: 30,
  });

  onUnmounted(() => {
    clearAll();
  });
</script>
